<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>06.js-animations-hooks</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
        <link
            href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.css"
            rel="stylesheet"
        />
    </head>

    <body>
        <div id="app">
            <button class="btn btn-primary" @click="show = !show">
                Show Alert
            </button>
            <!-- TODO:Js动画的Hooks -->
            <transition
            v-on:before-enter="beforeEnter" 
            v-on:enter="enter"
            v-on:after-enter="afterEnter"
            v-on:enter-cancelled="enterCancelled"
            v-on:before-leave="beforeLeave"
            v-on:leave="leave"
            v-on:after-leave="afterLeave"
            v-on:leave-cancelled="leaveCancelled"
            appear
            :css="false"
            >
            <div
                style="width:100px;height: 100px;background:grey" 
                v-if="show"
            ></div>

            </transition>
        </div>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    show: true,
                    elementWidth:100,
                },
                methods:{
                    methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}
                }
            });
        </script>
    </body>
</html>
